<template>
  <div>
    <div class="swiper-wrapper swiper1">
      <div class="swiper-slide "  v-for="(item, index) in navOrders" :key="index" @click="changeTab(index)" :class="{selected:cateIndex == index}">
        {{item.name}}
      </div>
    </div>
    <div id="order">
      <div style="width: 100%;height: 100%;background-color: #f5f4f9;">
        <div class="zbaff1 zbaff2">
          <ul>
            <li class="li1 clearFloat" v-for="(item, index) in allOrders" :key="index">
              <section @click="getOrderDetail(item.num)">
                <div class="myOrder_tt">
                  <span><i><img src="../../../images/bwm.jpg"/></i>{{item.name}}</span>
                  <span class="des">{{item.status.state}}</span>
                </div>
                <div class="ig fl"><img src="http://rp.hengtianche.com/htc_car_wx/images/ls/index_img1.png"/></div>
                <div class="fon fr">
                  <div class="fon_sp "><span class="fon1">{{item.details}} </span><span class="fontright">{{item.price| currency('￥')}}</span>
                  </div>
                  <div class="clearFloat"></div>
                  <div class="fon_sp fon3">2017.10.02 零首付大众途观</div>
                  <div class="fon_sp fon3">保险服务 ￥12.00万 X10</div>
                  <div class="fon_sp fon2">高配 白色</div>
                  <div class="fon_sp fon5">X10</div>
                </div>
              </section>
              <div class="order_btn">
                <div class="fon_sp fon6 ">
                  <section v-for="(product, index) in item.productTrade" :key="index">
                    <span :data-src='product.img'>{{product.name}}</span>
                  </section>
                </div>
                <div class="fon_sp fon3">保证金费用 ￥325454</div>
                <div class="clearFloat"></div>
                <div class="fon_sp fon4">
                  <div v-show="item.status.code == '1'">
                    <input class="btn_line" type="button" value="取消订单"/>
                  </div>
                  <input type="button" v-show="item.status.code == '2'" value="保证金"/>
                  <input type="button" v-show="item.status.code == '3'" value="押汇利息"/>
                  <input type="button" v-show="item.status.code == '4'" value="垫税利息"/>

                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
  import foot from '../../../components/footer/footGuide'
  import {myIndexjs} from '../../../scripts/index.js'
  import {currency} from '../../../utils/currency'
  import fancyBox from 'vue-fancybox'

    export default {
        name: "trade",
        components : {
          foot
        },
        data() {
          return {
            cateIndex:0,
            clicked: 0,
            navOrders: [
              {"name": "所有订单","to":"/trade/all"},
              {"name": "待开证","to":"/trade/lc"},
              {"name": "待押汇","to":"/trade/negotiation"},
              {"name": "待垫税","to":"/trade/tax"}
              ],
            allOrders: [
              {
                num: '001', name: '北京宝马1', details: '2017款冯晓星', price: '89万', status: {code:'2',state:'待支付保证金'},
                productTrade: [
                  {url: 'http://img.mzlcepsp.gov.cn/20180329/image/QQ%E5%9B%BE%E7%89%8720171023163210.png', name: '外贸合同'},
                  {url: 'http://img.mzlcepsp.gov.cn/20180329/image/QQ%E5%9B%BE%E7%89%8720171023163210.png', name: '客户呈批表'},
                  {url: 'http://img.mzlcepsp.gov.cn/20180329/image/QQ%E5%9B%BE%E7%89%8720171023163210.png', name: '银行手续'},
                  {url: 'http://img.mzlcepsp.gov.cn/20180329/image/QQ%E5%9B%BE%E7%89%8720171023163210.png', name: '开证信息'},
                  {url: 'http://img.mzlcepsp.gov.cn/20180329/image/QQ%E5%9B%BE%E7%89%8720171023163210.png',name: '信用证到单(随附单据)'}
                ]
              },
              {num: '002', name: '北京宝马2', details: '2017款冯晓星2', price: '109万', status: {code:'3',state:'待支付押汇利息'}},
              {num: '003', name: '北京宝马3', details: '2017款冯晓星3', price: '129万', status: {code:'4',state:'待支付垫税利息'}},
            ],
            openOrders: [{name: '北京宝马2', details: '2017款冯晓星1', price: '89万'},
              {name: '北京宝马3', details: '2017款冯晓星21', price: '109万'},
              {name: '北京宝马4', details: '2017款冯晓星31', price: '129万'},
            ]
          }
        },
        filters: {
          currency: currency
        },
        methods:{
          changeTab(index){
            this.cateIndex=index;
          },
          getOrderDetail: function (num) {
            alert(num);
            this.$router.push({path: '/trade/detail', query: {num: num}})
          },
          open(e, imageList) {
            fancyBox(e.target, imageList);
          }
        }
    }
</script>

<style lang="scss"  scoped>
  @import "../../../style/common";
  @import "../../../style/mixin";
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }
  .swiper1 {width: 100%;}
  .swiper1 .selected {color: #ec5566;border-bottom: 2px solid #ec5566;}
  .swiper1 .swiper-slide{ text-align: center;font-size: 16px;height: 50px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;flex: 1;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;cursor: pointer;}
  .swiper2{width: 100%;}
  .swiper2 .swiper-slide{height: calc(100vh - 50px);background-color: #f5f4f9;color: #fff;text-align: center;box-sizing: border-box !important;overflow: auto !important;}

  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  .swiper1 {
    width: 100%;
    .selected {
      color: #ec5566;
      border-bottom: 2px solid #ec5566;
    }
    .swiper-slide {
      text-align: center;
      font-size: 16px;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      flex: 1;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      cursor: pointer;
      a{
        color: #888;}
    }
  }
  .swiper2 {
    width: 100%;
    .swiper-slide {
      height: calc(100vh - 50px);
      background-color: #f5f4f9;
      color: #fff;
      text-align: center;
      box-sizing: border-box !important;
      overflow: auto !important;
    }
  }

  .zbaff1 ul {
    margin-bottom: 1.25rem;
    li {
      padding: 0.28rem 0.02rem;
      margin-bottom: 0.04rem;
      background: #fff;
      text-align: left;
      a {
        height: 100%;
        margin-bottom: 0.26rem;
        display: inline-block;
        width: 100%;
      }
      .ig {
        margin-left: 0.24rem;
        img {
          vertical-align: middle;
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      .fon {
        width: 5.65rem;
        position: relative;
        float: left;
        .fon_sp {
          padding-left: 0.22rem;
        }
        .fon1 {
          line-height: 0.32rem;
          color: #666;
          font-size: 0.28rem;
          padding-top: 0.05rem;
          width: 4rem;
          float: left;
        }
      }
    }
  }

  .fon2 {
    line-height: 100%;
    font-size: 0.22rem;
    margin-top: 0.14rem;
  }

  .zbaff1 ul li .fon .fon3 {
    line-height: 0.25rem;
    color: #ccc;
    font-size: 0.22rem;
    margin-top: 0.14rem;
  }

  .fon4 {
    line-height: 0.25rem;
    color: #666;
    font-size: 0.22rem;
    padding-top: 0.12rem;
    margin-top: 0.24rem;
    text-align: right;
    padding-right: 0.2rem;
    input {
      color: #fff;
      padding: .1rem .3rem;
      background: #FA2F5D;
      border: none;
      border-radius: 0.5rem;
      float: right;
      margin-left: 0.2rem;
      font-size: 0.26rem;
      .btn_line {
        border: 1px solid #9B9B9B;
        color: #888;
        background: none;
        font-size: 0.26rem;
      }
    }
  }

  .zbaff1 ul li .fon {
    .fon5 {
      position: absolute;
      right: 0.2rem;
      top: .55rem;
      color: #9B9B9B;
      font-size: 0.2rem;
      line-height: .32rem;
      text-align: right;
    }
    .fontright {
      position: absolute;
      right: 0.16rem;
      line-height: 0.32rem;
      font-size: 0.28rem;
      top: 0.06rem;
      color: #9B9B9B;
    }
    .li2 .fon .fon2 {
      color: #9B9B9B;
    }
  }
  .fon2 {
    color: #888;
  }
  .myOrder_tt {
    border-bottom: dashed 1px #dddddd;
    margin-bottom: 0.2rem;
    span{
      line-height: 0.60rem;
      font-size: 0.28rem;
      color: #666;
      margin-left: 0.24rem;
      i img {
        width: 0.4rem;
        padding-right: 0.1rem;
        padding-bottom: 0.1rem;
      }
    }
    .des {
      float: right;
      color: #71b247;
      margin-right: 0.2rem;
      font-size: 0.22rem;
    }
    label {
      height: 0.4rem;
    }
    input[type=checkbox] {
      width: 0.2rem;
      height: 0.2rem;
    }
  }

  .order_btn {
    margin: 0 0.24rem;
    border-top: dashed 1px #dddddd;
    .fon3 {
      line-height: 0.25rem;
      color: #ccc;
      font-size: 0.22rem;
      margin-top: 0.14rem;
      float: right;
      width: 5.4rem;
    }
  }

  .fon6 {
    color: #4A4A4A;
    font-size: 0.22rem;
    line-height: 0.36rem;
    padding-top: 0.22rem;
    display: inline-block;
    width: 5.4rem;
    float: right;
    span {
      padding: 0 0.1rem;
      border: solid 1px #ffcd79;
      border-radius: 3px;
      color: #ee9b11;
      height: 0.36rem;
      line-height: 0.36rem;
      margin-bottom: 0.1rem;
      float: left;
      margin-right: 0.1rem;
      font-size: 0.22rem;
    }
  }

</style>
